<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件传值(Bus/观察者模式)</title>
    <script src="../vue.js"></script>
</head>
<!--总线机制-->
<body>
    <div id="root">
        <child content="sky"></child>
        <child content="Eagle"></child>
    </div>

    <script>
        Vue.prototype.bus = new Vue();

        Vue.component('child',{
            data:function(){
              return {
                  selfContent:this.content
              }
            },
            props:{
                content:String
            },
            template:"<div @click='handleClick'>{{selfContent}}</div>",
            methods:{
                handleClick:function () {
                    this.bus.$emit("change",this.selfContent)
                }
            },
            mounted:function () {
                var this_ = this;
                this.bus.$on('change',function (msg) {
                    this_.selfContent = msg;
                })
            }
        });

        var vm = new Vue({
            el:"#root"
        })
    </script>

</body>
</html>